<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body{
        display: flex;
        justify-content: center;
        align-items: center;
        /* 设置视口最小高度为整个视口，当内容超出视口时，视口高度会自动增加。这里的意思应该是让body占整个视口，然后body里的内容就可以居中了 */
        min-height: 100vh;
        /* background-color: #0f0f0f; */
        overflow: hidden;
    }
    .container{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        /* width: 500px;
        height: 500px; */
        background-color: pink;
    }
    .container .card{
        position: absolute;
        width: 240px;
        height: 360px;
        border-radius: 8px;
        background-color: hotpink;
        /* display: flex;
        justify-content: center;
        align-items: center; */
        text-align: center;
        line-height: 360px;
        color: rgba(0, 0, 0, 0);
        font-size: 8em;
        font-weight: 800;
        border: 10px solid rgb(24, 22, 22);
        transition: 0.5s;
        /* 更改旋转原点到卡片的最低边的中点位置 */
        transform-origin: 50% 100%;
        /* 滤镜 色相旋转 */
        filter: hue-rotate(calc(var(--i)*60deg));
        /* box-shadow: 0 15px 50px rgba(223, 210, 210, .1); */
    }
    .container:hover .card{
        transform: rotate(calc(var(--i)*5deg)) translate(calc(var(--i)*120px),-50px);
        /* box-shadow: 0 15px 50px rgba(223, 210, 210, .25); */
        color: rgba(0, 0, 0, .25);
        cursor: pointer;
    }
    .container:active .card:not(:active){
        background-color: #333;
    }
    .container .card:active{
        /* calc(var(--i) * 20px) */
        translate: calc(var(--i) * 20px) -50px;
        z-index: 1;
    }
</style>
<body>
    <div class="container">
        <div class="card" style="--i:-4">1</div>
        <div class="card" style="--i:-3">2</div>
        <div class="card" style="--i:-2">3</div>
        <div class="card" style="--i:-1">4</div>
        <div class="card" style="--i:0">5</div>
        <div class="card" style="--i:1">6</div>
        <div class="card" style="--i:2">7</div>
        <div class="card" style="--i:3">8</div>
        <div class="card" style="--i:4">9</div>
    </div>
</body>
</html>